<template>
  <view class="statisticPage-box">
    <HeaderNavOption
      :range="statistics.range"
      :selectValue="statistics.selectValue"
      title="个人统计"
      @dropdownChange="dropdownChange"
    />
    <view class="bg-box">
      <view class="subsection-box">
        <uv-subsection
          :current="current"
          :list="list"
          custom-item-style="border-radius: 16rpx;height: 64rpx;"
          custom-style="height: 80rpx;border-radius: 16rpx;padding:8rpx;"
          font-size="32rpx"
          @change="change"
        >
        </uv-subsection>
      </view>
      <view class="date-filter-box">
        <i class="iconfont icon-left-1" @tap="leftFilter"></i>
        <p class="date-filter">
          <text>{{ startDate.format('YYYY.MM.DD') }}</text>
          <text v-show="!isDay"> -</text>
          <text v-show="!isDay">{{ endDate.format('MM.DD') }}</text>
        </p>
        <i
          :class="{
            'iconfont icon-right-1-copy': true,
            active: today.format('YYYY.MM.DD') == endDate.format('YYYY.MM.DD'),
          }"
          @tap="rightFilter(today.format('YYYY.MM.DD') == endDate.format('YYYY.MM.DD'))"
        ></i>
      </view>
    </view>
    <view class="rollup-list">
      <view class="list-left"  @tap="exproteFn" >
        <i class="iconfont icon-file-text-line"></i>
        <text>{{ list[current] }}数据汇总</text>
      </view>
<!--            <text class="exprote"  @tap="exproteFn">导出报表</text>-->
    </view>

    <view class="statistic-info">
      <!--      <view class="list-info" >-->
      <!--        <text> 平均工时 </text>-->
      <!--        <view class="right-box" >-->
      <!--          <text> 24.5</text>-->
      <!--        </view>-->
      <!--      </view>-->
      <view
        v-for="(item, index) in statisticData"
        :key="index"
        class="list-info"
        @tap="goDetail(item.txt)"
      >
        <text> {{ item.txt }}</text>
        <view class="right-box">
          <text>
            {{ item.value }}
            <text v-show="statistics.selectValue === '考勤组统计' && item.value !== '更多'"
              >人次
            </text>
            <text v-show="statistics.selectValue === '个人统计' && item.value !== '更多'">次</text>
          </text>
          <i class="iconfont icon-youjiantou"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import HeaderNavOption from '@/components/HeaderNavOption/index.vue'
import { getStatistics } from '@/api/attendance'
import { getUserProfile } from '@/api/system/user'
import { onLoad } from '@dcloudio/uni-app'

const userInfo = ref(null)
// 导航页
let statistics = ref({
  selectValue: '个人统计',
  range: [
    {
      text: '考勤组统计',
      value: '考勤组统计'
    },
    {
      text: '个人统计',
      value: '个人统计'
    }
  ]
})

// 开始日期
const startDate = ref(null)
// 结束日期
const endDate = ref(null)
const dateObj = ref(dayjs())
const today = dayjs()
const isDay = ref(false)
const dropdownChange = (v) => {
  statistics.value.selectValue = v
}

// 日期模块
const list = ref(['日', '周', '月'])
const current = ref(1)

const reset = () => {
  dateObj.value = dayjs()
}
const change = (index) => {
  if (current.value !== index) {
    reset()
  }
  current.value = index
}
const getStatisticsFn = async (groupId = 0) => {
  let params = {
    groupId: groupId, // 考勤组0  个人1
    statisticsDateLte: dayjs(startDate.value).format('YYYY-MM-DD 00:00:00'),
    statisticsDateGte: dayjs(endDate.value).format('YYYY-MM-DD 23:59:59')
  }
  let { code, data } = await getStatistics(params)
  if (code === 200) {
    statisticData.value.forEach((v) => {
      switch (v.txt) {
        case '外勤':
          v.value = data.fieldworkCount
          break
        case '迟到':
          v.value = data.lateCount

          break

        case '缺卡':
          v.value = data.missingCardCount

          break
        // case '旷工':
        //   v.value = data.absentCount
        //
        //   break
        // case '出勤':
        //   v.value = data.attendanceCount
        //
        //   break
        // case '请假':
        //   v.value = data.leaveCount
        //
        //   break
        // case '加班':
        //   v.value = data.overtimeCount
        //
        //   break
        // case '早退':
        //   v.value = data.earlyLeaveCount
        //
        //   break
      }
    })
  }
}

// 日 周 年 切换
watch(
  () => current.value,
  (val) => {
    switch (val) {
      case 0:
        endDate.value = dateObj.value
        isDay.value = true
        startDate.value = dateObj.value

        break
      case 1:
        isDay.value = false
        endDate.value = dateObj.value
        startDate.value = dateObj.value.subtract(7, 'day')

        break
      case 2:
        isDay.value = false
        endDate.value = dateObj.value.endOf('month')
        startDate.value = dateObj.value.startOf('month')

        break
      default:
        break
    }
    if (statistics.value.selectValue === '考勤组统计') {
      getStatisticsFn()
    } else if (statistics.value.selectValue === '个人统计') {
      setTimeout(() => {
        getStatisticsFn(userInfo.value.userId)
      }, 100)
    }
  },
  {
    immediate: true
  }
)

// 左切换日期
const leftFilter = () => {
  switch (current.value) {
    case 0:
      startDate.value = dateObj.value.subtract(1, 'day')
      endDate.value = dateObj.value.subtract(1, 'day')
      dateObj.value = dateObj.value.subtract(1, 'day')

      break
    case 1:
      dateObj.value = dateObj.value.subtract(1, 'week')
      endDate.value = dateObj.value
      startDate.value = dateObj.value.subtract(1, 'week')
      break
    case 2:
      dateObj.value = dateObj.value.startOf('month').subtract(1, 'month')
      endDate.value = dateObj.value.endOf('month')
      startDate.value = dateObj.value.startOf('month')
      break
    default:
      break
  }
  if (statistics.value.selectValue === '考勤组统计') {
    getStatisticsFn()
  } else if (statistics.value.selectValue === '个人统计') {
    getStatisticsFn(userInfo.value.userId)
  }
}
// 右切换日期
const rightFilter = (flag) => {
  if (!flag) {
    switch (current.value) {
      case 0:
        startDate.value = dateObj.value.add(1, 'day')
        endDate.value = dateObj.value.add(1, 'day')
        dateObj.value = dateObj.value.add(1, 'day')

        break
      case 1:
        startDate.value = dateObj.value.subtract(7, 'day')
        endDate.value = dateObj.value
        dateObj.value = dateObj.value.add(7, 'day')
        break
      case 2:
        dateObj.value = dateObj.value.startOf('month').add(1, 'month')
        startDate.value = dateObj.value.startOf('month')
        endDate.value = dateObj.value.endOf('month')
        break
      default:
        break
    }
    if (statistics.value.selectValue === '考勤组统计') {
      getStatisticsFn()
    } else if (statistics.value.selectValue === '个人统计') {
      getStatisticsFn(userInfo.value.userId)
    }
  }
}

// 统计数据
const statisticData = ref([
  {
    txt: '外勤',
    value: '52'
  },
  {
    txt: '迟到',
    value: '34'
  },

  {
    txt: '缺卡',
    value: '36'
  },
  {
    txt: '旷工',
    value: '更多'
  },
  {
    txt: '出勤',
    value: '更多'
  },
  {
    txt: '请假',
    value: '更多'
  }
  // {
  //   txt: '加班',
  //   value: '68',
  // },
  // {
  //   txt: '早退',
  //   value: '43',
  // },
])

// 去详情
const goDetail = (title) => {
  let time = {
    startDate: startDate.value,
    endDate: endDate.value
  }

  if (statistics.value.selectValue === '考勤组统计') {
    time.groupId = 0
    uni.navigateTo({
      url:
        '/pages/attendance/statisticPage/detailList?title=' +
        title +
        '&time=' +
        encodeURIComponent(JSON.stringify(time))
    })
  } else if (statistics.value.selectValue === '个人统计') {
    time.groupId = userInfo.value.userId

    uni.navigateTo({
      url:
        '/pages/attendance/statisticPage/personalStatistic?data=' +
        encodeURIComponent(JSON.stringify(userInfo.value)) +
        '&time=' +
        encodeURIComponent(JSON.stringify(time))
    })
  }
}

watch(
  () => statistics.value.selectValue,
  (val) => {
    console.log(statistics.value.selectValue, '777')
    if (val === '考勤组统计') {
      getStatisticsFn()
    } else if (val === '个人统计') {
      getStatisticsFn(userInfo.value.userId)
    }
  }
)

const exproteFn = () => {
  uni.showToast({
    title: '正在开发中',
    icon: 'warning'
  })
}
const rolesGet = ['administrative_specialist', 'resources', 'administrative_manager']
const getUserProfileFn = async () => {
  let { code, data } = await getUserProfile()
  if (code === 200) {
    userInfo.value = data
    let flag = data.roles.some((v, i) => {
      return rolesGet.includes(v?.roleKey)
    })
    if(flag === false) {
      statistics.value.range = statistics.value.range.filter(
        item => !(item.text === '考勤组统计' && item.value === '考勤组统计')
      );
    }
  }
}
onLoad(async () => {
  await getUserProfileFn()
})
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.statisticPage-box {
  .bg-box {
    background-color: #fff;
    padding-bottom: 37rpx;
  }

  .subsection-box {
    padding: 20rpx 32rpx;
  }

  .date-filter-box {
    padding-top: 37rpx;

    @include flex($align: center, $justify: space-evenly);

    .iconfont {
      font-size: 32rpx;
    }

    .active {
      color: #c8d0d9;
    }

    .date-filter {
      color: #1d2129;
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
    }
  }

  .rollup-list {
    margin: 20rpx 32rpx;
    @include flex($align: center, $justify: space-between);
    padding: 32rpx;
    border-radius: 16rpx;
    background-color: #fff;

    .list-left {
      @include flex($align: center);

      .iconfont {
        margin-right: 24rpx;
        font-size: 32rpx;
      }
    }

    .exprote {
      color: #165dff;
    }
  }

  .statistic-info {
    border-radius: 16rpx;
    background-color: #fff;
    margin: 0 32rpx;

    .list-info {
      @include flex($align: center, $justify: space-between);
      padding: 32rpx;

      .right-box {
        @include flex($align: center);
        color: #86909c;

        .iconfont {
          margin-left: 16rpx;
        }
      }
    }
  }
}
</style>
